import './App.css';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import PhotoContextProvider from './context/PhotoContext';
import Item from './components/Item';
import Header from './components/Header';
import Search from './components/Search';


function App() {
  const handleSubmit = (e, history, searchInput) => {
    console.log("===")
    e.preventDefault();
    e.currentTarget.reset();
    let url = `/search/${searchInput}`;
    history.push(url);
  };

  return (
    <PhotoContextProvider>
      <Router>
        <div className="container">
          <Header handleSubmit={() => handleSubmit} />
          <Routes>
            <Route path='/' element={<Item searchItem="mountain" />} />
            <Route path='/mountain' element={<Item searchItem="mountain" />} />
            <Route path='/beach' element={<Item searchItem="beach" />} />
            <Route path='/bird' element={<Item searchItem="bird" />} />
            <Route path='/food' element={<Item searchItem="food" />} />
            <Route path='/search/:searchInput' element={<Search />} />
          </Routes>
        </div>
      </Router>
    </PhotoContextProvider>
  );
}

export default App;
